<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="receive_search"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="$route.query.uid == null ? false : true"
      @toAdd="add_data"
      :isShow="$route.query.uid == null"
    >
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list.data" stripe v-loading="loading" header-row-class-name="head_color" tooltip-effect="dark" style="width: 99.8%">
          <el-table-column label="封面图" min-width="120" align="center">
            <template slot-scope="scope">
              <div class="tc">
                <img style="width: 150px" v-if="scope.row.cover1 && scope.row.cover1 != ''" :src="$fnc.getImgUrl(scope.row.cover1)" />
                <img style="width: 150px" v-else :src="$fnc.getImgUrl(scope.row.cover)" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="主播头像 " min-width="120" align="center">
            <template slot-scope="scope">
              <div class="tc">
                <img style="width: 80px; height: 80px" :src="$fnc.getImgUrl(scope.row.avatar)" class="user_img" />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="主播信息" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <span>用户名：</span>
                <small>{{ scope.row.username || "----" }}</small>
                <br />
                <span>用户昵称：</span>
                <small>{{ scope.row.nickname || "----" }}</small>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="录制信息" min-width="320">
            <template slot-scope="scope">
              <div class="user_table">
                <div>
                  <span>标题：</span>
                  <small v-if="scope.row.title1 && scope.row.title1 != ''">{{ scope.row.title1 || "----" }}</small>
                  <small v-else>{{ scope.row.title || "----" }}</small>
                </div>
                <div>
                  <span>点赞量：</span>
                  <small>{{ scope.row.like_number }}</small>
                </div>
                <div v-if="scope.row.duration">
                  <span>录制时长：</span>
                  <small>{{ scope.row.duration | formatSeconds }}</small>
                </div>
                <div>
                  <span>视频地址：</span>
                  <small>{{ scope.row.uri }}</small>
                </div>
                <div v-if="scope.row.product && scope.row.product.title">
                  <span>关联商品：</span>
                  <el-tag type="primary" effect="dark" style="color: #fff" size="mini">{{ scope.row.product.title }}</el-tag>
                </div>
                <div v-if="scope.row.form && scope.row.form.title">
                  <span>关联表单：</span>
                  <el-tag type="primary" effect="dark" style="color: #fff" size="mini">{{ scope.row.form.title }}</el-tag>
                </div>

                <div v-if="scope.row.start_time > 0 && scope.row.stop_time > 0">
                  <span>直播开始时间~结束时间：</span>
                  <small>{{ scope.row.start_time | getTimeFormat }} ~ {{ scope.row.stop_time | getTimeFormat }}</small>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="精选回放" min-width="125">
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.is_recommend"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="已开启"
                inactive-text="已关闭"
                active-value="1"
                @change="change_recomment($event, scope.row, 'recomment')"
                inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="是否审核" min-width="125">
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.is_check"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="已审核"
                inactive-text="未审核"
                active-value="1"
                @change="change_recomment($event, scope.row, 'is_check')"
                inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <el-row class="myblank">
                <el-button :loading="$store.state.isLoading" size="mini" @click="editbtn(scope.row)" type="primary">编辑</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="showvideo(scope.row)"> 查看回放</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="$router.push('/index/live/comment?id=' + scope.row.id)"> 查看评论</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" type="danger" @click="delvideo(scope.row)"> 删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
    <el-dialog :close-on-click-modal="false" title="回放" class="tl size_13" width="500px" @close="dia_close" :visible.sync="dialogFormVisible">
      <div>
        <video controls="controls" loop="loop" ref="videobox" muted="muted" autoplay="autoplay" id="videobox" width="100%" height="auto">
          <source :src="playurl" type="video/mp4" />
        </video>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="编辑回放" :append-to-body="true" class="tl size_13" width="800px" :visible.sync="dialogeditVisible">
      <el-form label-width="120px" :model="edit_form">
        <el-form-item label="点赞量：">
          <el-col :span="12">
            <el-input placeholder="请输入点赞量" v-model="edit_form.like_number" clearable> </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="回放标题：">
          <el-col :span="12">
            <el-input placeholder="请输入直播间标题" v-model="edit_form.title1" maxlength="25" show-word-limit clearable> </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="回放封面:" prop="avatar">
          <el-col :span="12">
            <el-input v-model="edit_form.cover1" autocomplete="off" disabled class="mar_bottom_5"></el-input>
            <uploadpic :piclink="edit_form.cover1" :width="150" :height="150" :is_more="false" @send_pic="onSuccess"></uploadpic>
          </el-col>
        </el-form-item>
        <el-form-item label="关联商品">
          <el-col :span="12">
            <el-input placeholder="请选择关联商品" v-model="edit_form.pid_cn" disabled clearable> </el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzshop('xzShop')">选择商品</el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="表单广告图">
          <el-col :span="12">
            <el-input v-model="edit_form.fid_piclink" autocomplete="off" disabled class="mar_bottom_5"></el-input>
            <uploadpic :piclink="edit_form.fid_piclink" :width="225" :height="90" :is_more="false" @send_pic="onSuccess2"></uploadpic>
          </el-col>
        </el-form-item>

        <el-form-item label="关联表单">
          <el-col :span="12">
            <el-input placeholder="请选择关联表单" v-model="edit_form.fid_cn" disabled clearable> </el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzshop('xzForm')">选择表单</el-button>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button :loading="$store.state.isLoading" type="primary" @click="saveeditbtn">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="添加回放" :append-to-body="true" class="tl size_13" width="800px" :visible.sync="dialogaddVisible">
      <el-form label-width="160px" label-position="right" :model="formVideo">
        <el-form-item label="直播时间段：">
          <el-col :span="12">
            <el-date-picker
              style="width: 100%"
              v-model="createTime"
              type="datetimerange"
              align="right"
              unlink-panels
              value-format="timestamp"
              range-separator="-"
              clearable
              start-placeholder="浏览时间起"
              end-placeholder="浏览时间止"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="回放标题：">
          <el-col :span="12">
            <el-input placeholder="请输入直播间标题" v-model="formVideo.title1" clearable> </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="关联商品">
          <el-col :span="12">
            <el-input placeholder="请选择关联商品" v-model="shopinfo.title" disabled clearable> </el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzshop('xzShop')">选择商品</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="是否精选">
          <el-col :span="12">
            <el-switch
              class="zdySwith"
              :width="82"
              v-model="formVideo.is_recommend"
              active-color="#1aad19"
              inactive-color="#ffffff"
              active-text="已开启"
              inactive-text="已关闭"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-col>
        </el-form-item>

        <el-form-item label="直播时长（秒为单位）">
          <el-col :span="12">
            <el-input placeholder="请输入直播时长" v-model="formVideo.duration" clearable> </el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="直播间视频">
          <el-col :span="24" class="tl" style="height: 250px">
            <uploadVideo @send_url="rev_send_url" :pro_src="formVideo.video"></uploadVideo>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button :loading="$store.state.isLoading" type="primary" @click="addbtn">保存</el-button>
        </el-form-item>
      </el-form>
      <keep-alive>
        <component :is="current" :show="shows" :isAll="true" showType="list" @sendShop="getSend" @isshow="getShow"></component>
      </keep-alive>
    </el-dialog>

    <keep-alive>
      <component :is="current" :show="shows" :isAll="true" showType="list" @sendShop="getSend" @isshow="getShow"></component>
    </keep-alive>
  </div>
</template>
<script>
import uploadpic from "@/components/page/pic/up_pic";
import uploadVideo from "@/components/currency/uploadvideo";
import { liveFileSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import xzShop from "@/components/currency/xz_shop.vue";
import xzForm from "@/components/currency/xz_form.vue";
export default {
  data() {
    return {
      shows: true,
      current: "",
      shopinfo: {
        title: "",
      },
      userSearchData: liveFileSearchData,
      dialogeditVisible: false,
      edit_form: {},
      createTime: [],
      formVideo: {
        uid: "",
        uri: "",
        is_recommend: 0,
        // title: "",
        duration: "",
        start_time: "",
        stop_time: "",
      },
      dialogaddVisible: false,
      playurl: "",
      is_edit: false,
      dialogFormVisible: false,
      live_single: {
        piclink: "",
      },
      current: "",
      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      row: {},
      multipleSelection: [],
      showCity: true,
    };
  },
  components: {
    uploadpic,
    uploadVideo,
    xzShop,
    xzForm,
  },
  methods: {
    xzshop(str) {
      if (str == "xzShop") {
        if (this.$store.state.shopSlist == "" || this.$store.state.shopSlist.page != 1) {
          this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
        }
      }

      this.current = str;
      this.shows = true;
    },
    getShow(val) {
      this.shows = val;
    },
    getSend(row) {
      console.log(row);
      if (this.current == "xzShop") {
        console.log(row);
        this.shopinfo = row;
        this.edit_form.pid = row.id;
        this.edit_form.pid_cn = row.title;
      } else if (this.current == "xzForm") {
        this.edit_form.fid = row.id;
        this.edit_form.fid_cn = row.title;
      }

      // this.$emit("sendRow",row)
    },
    delvideo(info) {
      this.$swal({
        title: "您确定要删除这些信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          this.$api.getPage.del_reply({ id: info.id }).then((res) => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getNewsAll(this.searchAll);
            } else {
              this.$swal("删除失败！", res.data.result, "success");
              this.getNewsAll(this.searchAll);
            }
          });
        }
      });
    },
    saveeditbtn() {
      var params = {};
      params = this.edit_form;
      delete params.product;
      delete params.form;
      this.$api.getPage.edit_reply_isrecommend(params).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess(res.data.result);
          this.edit_form = {};
          this.dialogeditVisible = false;
          this.getNewsAll();
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    onSuccess2(pic) {
      this.$set(this.edit_form, "fid_piclink", pic);
    },
    onSuccess(pic) {
      console.log(pic);
      this.$set(this.edit_form, "cover1", pic);
      // this.edit_form.cover1 = pic;
    },
    editbtn(item) {
      if (item.product && item.product.title) {
        item.pid_cn = item.product.title;
      }
      if (item.form && item.form.title) {
        item.fid_cn = item.form.title;
      }
      this.edit_form = item;
      this.dialogeditVisible = true;
    },
    addbtn() {
      var params = {};
      params = this.formVideo;
      params.uid = this.$route.query.uid;
      this.$api.getPage.add_reply(params).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("添加成功");
          this.formVideo = {
            uid: "",
            uri: "",
            // title: "",
            duration: "",
            start_time: "",
            stop_time: "",
          };
          this.dialogaddVisible = false;
          this.getNewsAll();
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },

    rev_send_url(val) {
      this.formVideo.uri = val.video_url;
      this.formVideo.vid = val.video_id;
    },
    add_data() {
      if (this.$route.query.uid) {
        this.dialogaddVisible = true;
      }
    },
    change_recomment(val, row, type) {
      var params = {};
      params.id = row.id;
      if (type == "recomment") {
        params.is_recommend = val;
      } else {
        params.is_check = val;
      }
      this.$api.getPage.edit_reply_isrecommend(params).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess(res.data.result);
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    dia_close() {
      this.playurl = "";
      var x = document.getElementById("videobox");
      x.load();
    },
    showvideo(info) {
      this.dialogFormVisible = true;
      if (info.uri.indexOf("http") < 0) {
        this.playurl = "https://inexweb.oss-cn-shenzhen.aliyuncs.com/" + info.uri;
      } else {
        this.playurl = info.uri;
      }
      this.$nextTick(() => {
        var x = document.getElementById("videobox");
        x.load();
      });
    },
    receive_search(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      if (this.$route.query.uid) {
        params.uid = this.$route.query.uid;
      }
      this.$api.getPage.get_live_file(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },

    reload() {
      this.getNewsAll(this.searchAll);
    },
  },
  beforeCreate() {},
  created() {
    this.getNewsAll();
  },
  filters: {
    formatSeconds(value) {
      var theTime = parseInt(value); // 需要转换的时间秒
      var theTime1 = 0; // 分
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
          if (theTime2 > 24) {
            //大于24小时
            theTime3 = parseInt(theTime2 / 24);
            theTime2 = parseInt(theTime2 % 24);
          }
        }
      }
      var result = "";
      if (theTime > 0) {
        result = "" + parseInt(theTime) + "秒";
      }
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分" + result;
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      if (theTime3 > 0) {
        result = "" + parseInt(theTime3) + "天" + result;
      }
      return result;
    },
  },
  computed: {},
  watch: {
    createTime(val) {
      if (val != null) {
        this.formVideo.start_time = this.$fnc.phptime(val[0]);
        this.formVideo.stop_time = this.$fnc.phptime(val[1]);
      } else {
        this.formVideo.start_time = "";
        this.formVideo.stop_time = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}
</style>
